@extends('Layout/base')

@section('header-js')

	<link rel="stylesheet" type="text/css" href="{{ asset('css/base.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ asset('css/home.css') }}">
	<script type="text/javascript" src="{{ asset('js/index.js') }}"></script>
	<script type="text/javascript" src="{{ asset('js/js-tab.js') }}"></script>

@endsection

@section('content')

    <div class="yHeader">
        <div class="yNavIndex">
            <div class="pullDown">
                <h2 class="pullDownTitle">全部商品分类</h2>
            </div>
            <ul class="yMenuIndex">
                <li><a href="{{ route('Home.goodssale')}}" target="_blank">限时抢购</a></li>
                @foreach($types as $v)
                <li><a href="{{ route('Home.goodsList', ['id' => $v['id']]) }}" target="_blank">{{ $v['type_name'] }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
</header>
<!-- header End -->

<div class="containers">

    @if( empty($res) )
    <div class="pc-no">未找到<em>"{{ $keyword }}"</em>的相关商品</div>
    @else
    <div class="pc-no">找到<em>{{ $count }}款</em>与"{{ $keyword }}"相关的商品</div>
        <div class="time-border-list pc-search-list clearfix">
            <ul class="clearfix">
            @foreach($res as $v)
                <li >
                    <a href="{{ route('goods.goodsdetail', ['id' => $v['goods_id']]) }}">
                        <div style="width:213px; height:213px"><img src="http://oydt3ttm3.bkt.clouddn.com/{{ $v['goods_pic']['goods_pic'] }}" width="213"></div>
                    </a>
                    <p class="head-name">
                        <a href="{{ route('goods.goodsdetail', ['id' => $v['goods_id']]) }}">{{ $v['goods_name'] }}</a>
                    </p>
                    <p>
                        <span class="price">￥{{$v['price']}}</span>
                    </p>
                    <p class="clearfix">
                        <a href="{{ route('goods.goodsdetail', ['id' => $v['goods_id']]) }}"><span class="label-default fl">购买</span></a>
                    </p>
                </li>
            @endforeach
            </ul>
        </div>
        {{ $res->appends(['keyword' => $keyword ] )->links('Home.GoodslistPage') }}

     @endif
    </div>

<div class="time-lists clearfix">

</div>
<div class="pc-120"></div>


@endsection


@section('foot-js')

<script>
         $(function(){
             $(".yScrollListInList1 ul").css({width:$(".yScrollListInList1 ul li").length*(160+84)+"px"});
             $(".yScrollListInList2 ul").css({width:$(".yScrollListInList2 ul li").length*(160+84)+"px"});
             var numwidth=(160+84)*4;
             $(".yScrollListInList .yScrollListbtnl").click(function(){
                 var obj=$(this).parent(".yScrollListInList").find("ul");
                 if (!(obj.is(":animated"))) {
                     var lefts=parseInt(obj.css("left").slice(0,-4));
                     if(lefts<60){
                         obj.animate({left:lefts+numwidth},1000);
                     }
                 }
             })
             $(".yScrollListInList .yScrollListbtnr").click(function(){
                 var obj=$(this).parent(".yScrollListInList").find("ul");
                 var objcds=-(60+(Math.ceil(obj.find("li").length/4)-4)*numwidth);
                 if (!(obj.is(":animated"))) {
                     var lefts=parseInt(obj.css("left").slice(0,-4));
                     if(lefts>objcds){
                         obj.animate({left:lefts-numwidth},1000);
                     }
                 }
             })
         })
     </script>
    <script>
         $(function(){

             $("#H-table li").each(function(i){
                 $(this).click((function(k){
                     var _index = k;
                     return function(){
                         $(this).addClass("cur").siblings().removeClass("cur");
                         $(".H-over").hide();
                         $(".H-over:eq(" + _index + ")").show();
                     }
                 })(i));
             });
             $("#H-table1 li").each(function(i){
                 $(this).click((function(k){
                     var _index = k;
                     return function(){
                         $(this).addClass("cur").siblings().removeClass("cur");
                         $(".H-over1").hide();
                         $(".H-over1:eq(" + _index + ")").show();
                     }
                 })(i));
             });
         });
     </script>
    <script type="text/javascript">
         (function(a){
             a.fn.hoverClass=function(b){
                 var a=this;
                 a.each(function(c){
                     a.eq(c).hover(function(){
                         $(this).addClass(b)
                     },function(){
                         $(this).removeClass(b)
                     })
                 });
                 return a
             };
         })(jQuery);

         $(function(){
             $("#pc-nav").hoverClass("current");
         });
     </script>

@endsection
